import React, { memo, useState, useEffect } from 'react';
import { useSelector } from 'react-redux';
import Header from '../../components/header';
import { renderRoutes } from 'react-router-config';

import { MainStyle } from './style';

function Main(props) {
  const Transparency = useSelector(state => state.Transparency);
  const [HexadecimalTransparent, setHexaTransparent] = useState();
  const theme = useSelector(state => state.theme);
  useEffect(() => {
    switch (Transparency) {
      case 0:
        setHexaTransparent('00');
        break;
      case 10:
        setHexaTransparent('1A');
        break;
      case 20:
        setHexaTransparent('33');
        break;
      case 30:
        setHexaTransparent('4D');
        break;
      case 40:
        setHexaTransparent('66');
        break;
      case 50:
        setHexaTransparent('80');
        break;
      case 60:
        setHexaTransparent('99');
        break;
      case 70:
        setHexaTransparent('B3');
        break;
      case 80:
        setHexaTransparent('CC');
        break;
      case 90:
        setHexaTransparent('E6');
        break;
      case 100:
        setHexaTransparent('FF');
        break;
      default:
        setHexaTransparent('CC');
    }
  }, [Transparency]);
  return (
    <MainStyle GlobalColor={theme} Transparency={HexadecimalTransparent}>
      <Header />
      {renderRoutes(props.route.routes)}
    </MainStyle>
  );
}

export default memo(Main);
